<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情</title>
  <link rel="stylesheet" href="../../public/css/bootstrap.min.css">
  <script src="../../public/js/jquery-3.4.1.min.js"></script>
  <script src="../../public/js/bootstrap.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    input {
      outline: none;
    }

    a {
      text-decoration: none;
      color: black;
    }

    body {
      width: 100%;
      color: #333333;
      position: relative;
      font-family: '微软雅黑', Arial;
      font-size: 12px !important;
      min-width: 1200px;
    }

    .detail-nav {
      width: 100%;
      height: 30px;
      background: #d61a39;
      margin: 0 auto;
    }

    .fl-l a {
      position: relative;
      padding: 0 50px;
      display: block;
      color: #fff;
      line-height: 30px;
    }

    .fl-r a {
      position: relative;
      padding: 0 50px;
      display: block;
      color: #fff;
      line-height: 30px;
    }

    .main-box {
      margin-top: 20px;
      font-size: 13px;
    }

    .main-box .container {
      width: 100%;
      margin: 0 auto;
      height: 100%;
    }

    /* 详情上部左边 */
    .leftView {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
    }

    /* 水印 */
    img.shuiyin {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 999;
    }

    /* 放大镜部分 */
    .zoom-slider {
      display: none;
      width: 200px;
      height: 200px;
      background: #FEDE4F;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(Opacity=50);
      position: absolute;
      cursor: move;
    }

    .smallImg {
      width: 400px;
      height: 400px;
      border: 1px solid #ccc !important;
    }

    .rightView {
      position: absolute;
      left: 430px;
      top: 0;
      width: 500px;
      height: 500px;
      /* border: 1px solid #ccc !important; */
      overflow: hidden;
      z-index: 100;
      background: #fff;
      display: none;
    }

    /* 商品多角度图 */
    .thumb-img {
      margin-bottom: 20px;
    }

    .thumb-img .thumb-list {
      margin-top: 20px;
      width: 401px;
      height: 67px;
      overflow: hidden;
    }

    .thumb-item img {
      width: 65px;
      height: 65px;
      border: 1px solid #bfbfbf;
      margin-left: 10px;
      border: 1px solid #d61a39;
    }

    /* 详情上部右边 */
    .detail-property {
      width: 765px;
      font-size: 13px;
      margin-left: 30px;
      border-right: 1px solid #d2cfcf;
      border-bottom: 1px solid #d2cfcf;
    }

    .detail-property h1 {
      font-size: 18px;
      font-weight: bolder;
    }

    .detail-panel {
      padding: 10px;
      background: url(https://www.ewfresh.com/images/panel.png) no-repeat top center;
      background-size: cover;
      font-size: 13px;
    }

    .detail-panel .panel-name {
      margin-bottom: 10px;
      line-height: 20px;
    }

    .detail-panel .detail-price {
      margin-top: 10px;
      font-size: 16px;
      color: #d61a39;
      font-weight: bold;
    }

    /* 地址 */
    .detail-address {
      border-bottom: 1px dashed #c3c3c3;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    .detail-address-item {
      margin-bottom: 20px;
    }

    .detail-address-item span {
      margin: 6px 10px 0 0;
    }

    /* 规格 */
    .detail-pro {
      margin: 10px 0;
    }

    .detail-spec span {
      margin: 6px 10px 0 0;
    }

    .attr-res {
      min-width: 80px;
      white-space: nowrap;
      display: block;
      padding: 5px;
      text-align: center;
      border: 1px solid #ccc;
      color: #000;
      text-decoration: none;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      background: transparent;
      outline: none;
    }

    button,
    input,
    select,
    textarea {
      font-size: 100%;
    }

    .attr-res.on {
      border: 1px solid #FF0036;
      background: url(https://www.ewfresh.com/images/selected.png) no-repeat bottom right;
    }

    /* 数量 */
    .detail-pro {
      margin: 10px 0;
    }

    /* 减 */
    .goods-reduce {
      float: left;
      width: 34px;
      height: 34px;
      border: none;
      font-weight: bold;
      cursor: pointer;
    }

    input[type=text],
    input[type=number],
    input[type=password] {
      border: 1px solid #ccc;
    }

    .goods-num {
      float: left;
      text-align: center;
      width: 34px;
      height: 34px;
      border: none;
      background: #eeeeee;
      text-align: center;
    }

    input.goods-num[type="number"] {
      -moz-appearance: textfield;
    }

    .goods-num:hover {
      border: 1px solid black;
    }

    .goods-add {
      float: left;
      width: 34px;
      height: 34px;
      border: none;
      font-weight: bold;
      cursor: pointer;
    }

    .inventory-zone {
      margin-left: 15px;
    }

    .inventory-zone p {
      margin: 0;
    }

    /* 购买按钮 */
    .detail-action {
      margin: 20px 0;
    }

    .detail-action .add-btn,
    .detail-action .buy-btn {
      height: 35px;
      line-height: 35px;
      margin-left: 20px;
      text-align: center;
      float: left;
      overflow: hidden;
      position: relative;
      width: 145px;
      background: #d61a39;
      color: #fff;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      cursor: pointer;
      outline: none;
      border: none;
    }

    /* 下部详情 */
    .detail-box {
      width: 100%;
      margin-left: 40px;
      border: 1px solid #d2cfcf;
    }

    .detail-sub {
      padding-left: 20px;
      border-bottom: 1px solid #d61a39;
      margin-top: 20px;
    }

    .detail-sub li {

      margin-bottom: -1px;
      color: #d61a39;
      padding: 10px;
      background: #fff;
      border-top: 1px solid #d61a39;
      border-right: 1px solid #d61a39;
      border-bottom: 1px solid #d61a39;
      cursor: pointer;
    }

    .detail-sub li.on {
      color: #fff;
      background: #d61a39;
    }

    .produce-list {
      padding: 20px 0;
      border-bottom: 1px dashed #d2cfcf;
    }

    .produce-list li {
      width: 33.3%;
      margin: 10px 0;
      padding: 0 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .s-title {
      font-weight: bold;
    }

    .pic-produce {
      margin: 20px 0;
      padding: 0 20px;
    }
  </style>
</head>

<body>
  <!-- 详情导航 -->
  <div class="detail-nav ">
    <ul class="fl d-flex">
      <li class="fl-l">
        <a href="" class="allTypeLang">所有分类</a>
      </li>
      <li class="fl-r">
        <a href="" class="indexLang">店铺首页</a>
      </li>
    </ul>
  </div>
  <!-- 详情主体 -->
  <!-- 上部 -->
  <div class="main-box">
    <div class="container d-flex justify-content-between">
      <!-- 左侧 -->
      <div class="preview">
        <!-- 图与放大镜（待做） -->
        <div class="preview-box">
          <div class="leftView">
            <img src="../../public/img/shopShuiYin.png" alt="" class="shuiyin">
            <div class="zoom-slider" style="display: none; left: 200px; top: 44px;"></div>
            <img src="../../public/img/detail_eg.jpg" alt="缩小图片" class="smallImg">
          </div>
          <div class="rightView" style="display: none;">
            <img src="../../public/img/shopShuiYin.png" alt="" class="shuiyin-zoom">
            <img src="../../public/img/detail_eg.jpg" alt="放大图" class="bigImg" style="left: -500px; top: -500px;">
          </div>
        </div>
        <!-- 商品多角度图 -->
        <div class="thumb-img">
          <ul class="thumb-list">
            <li class="thumb-item">
              <a href="javascript:;">
                <img src="../../public/img/detail_eg.jpg" alt="" class="on">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="detail-property">
        <!-- 标题 -->
        <h1>九龙渔业 越南 带皮巴沙鱼柳（现货）</h1>
        <!-- 售前描述和价格 -->
        <div class="detail-panel">
          <div class="panel-name">
            ※八成
            ※截单时间为物流车发车前120分钟，如因下单时间推迟未能装车，平台将安排次日发货，如客户不能接受，请及时申请退款，谢谢配合！
            ※服务电话：400-029-6788
          </div>
          <div class="detail-price">
            <span class="box-p">
              <span style="color: black;font-weight: normal;">价格:</span>
              <span>&nbsp;￥144.00</span>
              <span>/箱</span>
            </span>
          </div>
        </div>
        <!-- 地址相关 -->
        <div class="detail-address">
          <div class="detail-address-item">
            <span>发货区域:</span>
            <select name="" id="">
              <option value="">华北</option>
              <option value="">华南</option>
              <option value="">华东</option>
              <option value="">西南</option>
            </select>
            有货
          </div>
          <div class="detail-address-item">
            <span>发货仓库:</span>
            <span>和兴仓库</span>
          </div>
          <div class="detail-address-item">
            <span>促销:</span>
            购买数量满20箱 单价减0.1元;购买数量满80箱 单价减0.15元;购买数量满200箱 单价减0.25元;购买数量满1000箱 单价减0.4元;
          </div>
        </div>
        <!-- 规格 -->
        <div class="detail-spec">
          <div class="detail-pro d-flex">
            <span>产品规格:</span>
            <button class="attr-res on">
              <span>冷冻巴沙鱼柳300-400g 足八成 10kg/箱</span>
            </button>
          </div>
        </div>
        <!-- 数量 -->
        <div class="sku-num">
          <div class="detail-pro">
            <span>数量:</span>
            <div class="right-dd d-flex align-items-lg-start">
              <div class="num-ipt d-flex">
                <input type="button" class="goods-reduce" value="-">
                <input type="number" class="goods-num" value="1">
                <input type="button" class="goods-add" value="+">
              </div>
              <div class="inventory-zone">
                <p>库存:200+</p>
                <p>已销售:1267箱</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 售后 -->
        <div class="shouhou">
          <p>*该商品由 &nbsp;<span style="color: blue;">易网聚鲜网络科技（北京）有限公司</span> &nbsp; 提供售后</p>
        </div>
        <div class="detail-action">
          <button class="add-btn">加入购物车</button>
          <button class="buy-btn">立即购买</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 下部 -->
  <div class="main-box">
    <div class="container">
      <!-- 下部详情 -->
      <div class="detail-box ">
        <!-- 介绍 -->
        <div style="width: 100%;height: 100%;">
          <ul class="detail-sub d-flex">
            <li class="on">商品介绍</li>
          </ul>
        </div>
        <!-- 详情正文 -->
        <ul class="tab-box">
          <li class="tab-li">
            <!-- 文字产品 -->
            <div class="word-produce">
              <ul class="produce-list d-flex flex-wrap">
                <li class="title">
                  <span class="s-title">品牌 :</span>
                  <span class="brand">雄鱼</span>
                </li>
                <li class="title">
                  <span class="s-title">商品名称 :</span>
                  <span class="brand">冷冻巴沙鱼（现货）</span>
                </li>
                <li class="title">
                  <span class="s-title">商品编码 :</span>
                  <span class="brand">302615</span>
                </li>
                <li class="title">
                  <span class="s-title">商品形态 :</span>
                  <span class="brand">鱼</span>
                </li>
                <li class="title">
                  <span class="s-title">产地 :</span>
                  <span class="brand">越南</span>
                </li>
              </ul>
            </div>
            <!-- 图片产品 -->
            <div class="pic-produce">
              <div>
                <img src="../../../wjx_server/public/images/laptop_pic/1.jpg" alt="">
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>